<html>

<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>TODO App</title>
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="public/bootstrap.min.css">
	<!-- Font Awesome -->
	<link rel="stylesheet" href="public/font-awesome.min.css">
	<!-- JQuery -->
	<script src="public/jquery.min.js"></script>
	<!-- Latest compiled and minified JavaScript -->
	<script src="public/bootstrap.min.js"></script>
	<!-- Vue.js -->
	<script src="public/vue.min.js"></script>
	<script src="public/vue-resource.min.js"></script>
</head>

<body>
	<div class="container">
		<div class="row">
			<div class="col-md-4">
				<h2>My Tasks</h2>
				<ul class="list-group">
					<li class="list-group-item" v-for="task in tasks">
						{{ task.name }}
						<span class="pull-right">
              <button class="btn btn-xs btn-danger" v-on:click="deleteTask($index)">
                <i class="fa fa-trash-o" aria-hidden="true"></i>
              </button>
            </span>
					</li>
				</ul>
				<div class="input-group">
					<input type="text" class="form-control" placeholder="New Task" v-on:keyup.enter="createTask" v-model="newTask.name">
					<span class="input-group-btn">
            <button class="btn btn-primary" type="button" v-on:click="createTask">Create</button>
          </span>
				</div>
				<!-- /input-group -->
			</div>
		</div>
	</div>
  <script>
    new Vue({
      el: 'body',
      data: {
        tasks: [],
        newTask: {}
      },
      created: function() {
        this.$http.get('/tasks').then(function(response) {
          this.tasks = response.data.items ? response.data.items : []
        })
      },
      methods: {
        createTask: function() {
          if (!$.trim(this.newTask.name)) {
            this.newTask = {}
            return
          }
          this.$http.put('/tasks', this.newTask).success(function(response) {
            this.newTask.id = response.created
            this.tasks.push(this.newTask)
            this.newTask = {}
          }).error(function(error) {
            console.log(error)
          });
        },
        deleteTask: function(index) {
          this.$http.delete('/tasks/' + this.tasks[index].id).success(function(response) {
            this.tasks.splice(index, 1)
          }).error(function(error) {
            console.log(error)
          })
        }
      }
    });
  </script>
</body>
</html>
